<template>
  <div class="my-progress" :key="Math.random()">
    <div class="my-progress-bar">
      {{percentage}}
      <div class="progress-bar-outer" :style="{height:strokeWidth+'px'}">
        <!--innerWidth+'%'-->
        <div class="progress-bar-inner"
             :style="{width:innerWidth>100?100+'%':innerWidth+'%',backgroundColor:strokeColor}">
          <div class="inner-text" :style="{lineHeight:strokeWidth+'px'}">
            {{percentage+'%'}}
          </div>
          <div class="tooltips-bar">
            <div class="top">{{title}}</div>
            <div class="shipment">Shipment:{{shipment}}</div>
            <div class="center">{{title==='Lifecycle attain'?'Lifecycle':'Volume'}}：{{volumeOrLife}}</div>
            <div class="bottom">{{title==='Lifecycle attain'?title:'Plan exit volume'}}：{{percentage}}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // innerWidth: 0
      }
    },
    props: {
      percentage: {
        type: Number,
        default: 0,
        required: true
      },
      strokeColor: {
        type: String,
        default: '#F5A623'
      },
      strokeWidth: {
        type: Number,
        default: 40
      },
      title: {
        type: String,
        required: true
      },
      shipment: {
        type: String
      },
      volumeOrLife: {}
//      tooltips:{
//        type: Object,
//        required: true
//      }
    },
    methods: {
      innerAnimate(target) {
        console.log(target, 'target');
        if (target > 100) {
          target = 100;
        }
        let time = 0,
          b = 0,
          duration = 800,
          c = target - b;
        let effect = function (t, c, b, d) {
          return t * c / (b + d);
        };
        var timer1 = setInterval(() => {
          time += 17;
          if (time >= duration) {
            clearInterval(timer1);
            this.innerWidth = target;
            return;
          }
          this.innerWidth = effect(time, c, b, duration)
        }, 17)
      },
    },
    components: {},
    computed: {
      innerWidth() {
        console.log(this.percentage, 'target');
        if (this.percentage > 100) {
          this.percentage = 100;
        }
        let time = 0,
          b = 0,
          duration = 800,
          c = this.percentage - b;
        let effect = function (t, c, b, d) {
          return t * c / (b + d);
        };
        var timer1 = setInterval(() => {
          time += 17;
          if (time >= duration) {
            clearInterval(timer1);
            return this.percentage;
          }
          return effect(time, c, b, duration)
        }, 17)
      }
    },
//    created(){
//      this.innerAnimate(this.percentage)
//    },
    watch: {
      percentage(n) {
        // this.innerAnimate(this.percentage)
      }
    },
    updated() {
      // this.innerAnimate(this.percentage)
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .my-progress {
    .my-progress-bar {
      .progress-bar-outer {
        width: 100%;
        background-color: #e6ebf5;
        .progress-bar-inner {
          height: 100%;
          position: relative;
          .inner-text {
            position: absolute;
            right: 10px;
            font-family: OpenSans-CondensedBold;
            font-size: 16px;
            color: #FFFFFF;
          }
          .tooltips-bar {
            display: none;
            padding: 8px 5px 0;
            position: absolute;
            right: -53px;
            top: -96px;
            width: 158px;
            background-color: rgba(255, 91, 0, 0.30);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
            border-radius: 6px;
            height: 84px;
            border: 1px solid red;
            z-index: 999;
            &:after {
              position: absolute;
              top: 74px;
              left: 60px;
              content: '';
              display: inline-block;
              /*background: #fff;*/
              /*width: 10px;*/
              /*height: 10px;*/
              border-width: 10px;
              border-style: solid;
              /*border-top: 1px solid #d1dbe5;*/
              /*border-right: 1px solid #d1dbe5;*/
              border-color: rgba(255, 91, 0, 0.30) transparent transparent transparent;
              transform: rotate(-45deg);
              -webkit-transform: rotate(135deg);
            }
            .top {
              font-family: OpenSans-CondensedBold;
              font-size: 14px;
              color: #666666;
              flex: 1;
            }
            .center, .bottom {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #666666;
              flex: 1;
            }
          }
          &:hover .tooltips-bar {
            display: flex;
            flex: 1;
            flex-direction: column;
          }
        }
      }
    }
  }

</style>
